<template>
  <ScrollContainer :style="{ height: scrollerHeight + 'px' }" class="diy-p5 diy-widget-panel" ref="wrapperRef">
    <a-layout style="background-color: #ffffff">
      <a-layout-sider
        width="50px"
        theme="light"
        :style="{
          overflow: 'auto',
          height: scrollerHeight + 'px',
          position: 'fixed',
          left: 0,
          top: '54px',
          bottom: 0,
        }"
        :collapsed="false"
        :trigger="null"
      >
        <MySingleMenu :style="{ width: '50px', height: scrollerHeight + 'px' }" v-model:selectedKey="state.selectedKey" :items="state.menuItems" />
      </a-layout-sider>
    </a-layout>

    <a-layout style="background-color: #ffffff; margin-left: 45px; padding: 5px; word-break: break-all">
      <a-layout-content style="overflow: initial">
        <div class="widget-collapse" v-if="state.selectedKey === 'comp'">
          <Collapse v-model:active-key="state.activeCollapseKey" ghost>
            <CollapsePanel key="containerComp" header="容器组件">
              <Draggable
                tag="ul"
                :list="containersComp"
                item-key="id"
                :group="{ name: 'dragGroup', pull: 'clone', put: false }"
                :clone="handleContainerWidgetClone"
                ghost-class="ghost"
                :sort="false"
                :move="checkContainerMove"
                @end="handleContainerDragEnd"
              >
                <template #item="{ element: ctn }">
                  <li class="container-widget-item" :title="ctn.displayName" :class="[ctn.disabledWidget ? 'disabled-widget' : '']">
                    <span>
                      <Icon :icon="ctn.icon" class="color-svg-icon" />
                      {{ ctn.displayName }}
                    </span>
                  </li>
                </template>
              </Draggable>
            </CollapsePanel>

            <CollapsePanel key="baseComp" header="基础组件">
              <Draggable
                tag="ul"
                :list="basicFieldComp"
                item-key="id"
                :group="{ name: 'dragGroup', pull: 'clone', put: false }"
                :clone="handleFieldWidgetClone"
                ghost-class="ghost"
                :sort="false"
                :move="checkContainerMove"
                @end="handleContainerDragEnd"
              >
                <template #item="{ element: ctn }">
                  <li
                    class="container-widget-item"
                    :title="t(`designer.widgetLabel.${ctn.type}`)"
                    :class="[ctn.disabledWidget ? 'disabled-widget' : '']"
                  >
                    <span>
                      <Icon :icon="ctn.icon" class="color-svg-icon" />
                      {{ t(`designer.widgetLabel.${ctn.type}`) }}
                    </span>
                  </li>
                </template>
              </Draggable>
            </CollapsePanel>
          </Collapse>
        </div>

        <div v-else-if="state.selectedKey === 'formTemplate'"> 表单模块 </div>
      </a-layout-content>
    </a-layout>
  </ScrollContainer>
</template>
<script lang="ts" name="diy-form-widget-panel" setup>
  import { ref, computed, onMounted, nextTick, PropType } from "vue"
  import { containers as CONS, basicFields as BFS, advancedFields as AFS, customFields as CFS } from "./widgetsConfig"
  import Draggable from "vuedraggable"
  import type { CSSProperties } from "vue"
  import { useDrawer } from "/@/components/Drawer"
  import { useI18n } from "/@/hooks/web/useI18n"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { Icon } from "/@/components/Icon"
  import { MySingleMenu } from "/@/components/Menu/index"
  import { ScrollContainer } from "/@/components/Container"
  import { Tabs, Collapse, CollapsePanel } from "ant-design-vue"
  import { buildUUID } from "/@/utils/uuid"
  import type { Designer } from "../type"
  import { useWidget } from "../form-widget/useWidget"

  const { t } = useI18n("diyForm")
  const TabPane = Tabs.TabPane
  const { hasWidget } = useWidget()

  const state = ref({
    activeCollapseKey: "containerComp",
    selectedKey: "comp",
    menuItems: [
      {
        key: "comp",
        icon: "ant-design:appstore-outlined",
        title: "组件",
      },
      {
        key: "formTemplate",
        icon: "ant-design:expand-outlined",
        title: "表单模板",
      },
    ],
  })
  const props = defineProps({
    scrollerHeight: { type: Number },
    designer: { type: Object as PropType<Designer>, default: () => {} },
  })
  const designer = props.designer

  const wrapperRef = ref()
  const containersComp = ref<any[]>([])
  const basicFieldComp = ref<any[]>([])
  onMounted(() => {
    loadWidgets()
  })

  const loadWidgets = () => {
    containersComp.value = CONS.map((con) => {
      return {
        id: buildUUID(),
        ...con,
      }
    }).filter((e) => hasWidget(e.type))

    basicFieldComp.value = BFS.map((con) => {
      return {
        id: buildUUID(),
        ...con,
      }
    }).filter((e) => hasWidget(e.type))
  }

  const handleContainerWidgetClone = (origin) => {
    console.log("========================> clone")
    return origin
  }

  const handleFieldWidgetClone = (origin) => {
    return designer?.copyNewFieldWidget(origin)
  }

  const checkContainerMove = (evt) => {
    // return this.designer.checkWidgetMove(evt)
  }

  const handleContainerDragEnd = (evt) => {}
</script>

<style lang="less">
  @import "../index.less";

  .color-svg-icon {
    -webkit-font-smoothing: antialiased;
    color: #7c7d82;
  }

  .side-scroll-bar {
    :deep(.el-scrollbar__wrap) {
      overflow-x: hidden;
    }
  }

  div.panel-container {
    padding-bottom: 10px;
  }

  .no-bottom-margin :deep(.el-tabs__header) {
    margin-bottom: 0;
  }

  .indent-left-margin {
    .ant-tabs-nav {
      width: 80px !important;
    }
  }

  .diy-widget-panel {
  }

  // 按钮禁用样式
  .disabled-widget {
    background-color: #f2f2f2; /* 灰色背景 */
    color: #cccccc; /* 禁用状态的文本颜色 */
    pointer-events: none;
  }

  .ant-collapse-content-box ul > li {
    list-style: none;
  }

  .widget-collapse {
    border-top-width: 0;

    .ant-collapse-item {
      margin-left: -15px !important;
    }

    .ant-collapse-header {
      margin-left: 2px;
      margin-bottom: -10px;
      font-style: italic;
      font-weight: bold;
    }

    .ant-collapse-content-box {
      padding: 10px 0px 10px 20px !important;

      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-block-start: 0;

        &:after {
          content: "";
          display: block;
          clear: both;
        }

        .container-widget-item,
        .field-widget-item {
          // display: inline-block;
          height: 32px;
          line-height: 32px;
          width: 110px;
          margin: 5px;
          cursor: move;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          background: #fff;
          border: 1px solid #e8e9eb;
          border-radius: 4px;
          padding: 0 8px;
        }

        .container-widget-item:hover,
        .field-widget-item:hover {
          background: #f1f2f3;
          border-color: @primary-color;

          .color-svg-icon {
            color: @primary-color;
          }
        }

        .drag-handler {
          position: absolute;
          top: 0;
          left: 160px;
          background-color: #dddddd;
          border-radius: 5px;
          padding-right: 5px;
          font-size: 11px;
          color: #666666;
        }
      }
    }
  }

  .el-card.ft-card {
    border: 1px solid #8896b3;
  }

  .ft-card {
    margin-bottom: 10px;

    .bottom {
      margin-top: 10px;
      line-height: 12px;
    }

    /*
  .image-zoom {
    height: 500px;
    width: 620px
  }
  */

    .ft-title {
      font-size: 13px;
      font-weight: bold;
    }

    .right-button {
      padding: 0;
      float: right;
    }

    .clear-fix:before,
    .clear-fix:after {
      display: table;
      content: "";
    }

    .clear-fix:after {
      clear: both;
    }
  }
</style>
